<template>
  <div>
    <!-- 条件查询 -->
    <div style="margin: auto; width: 100%">
      <el-form :inline="true" :model="visitor" class="demo-form-inline">
        <el-form-item label="性别">
          <el-select v-model="visitor.sex" placeholder="--请选择--" clearable>
            <!-- <el-option label="--请选择--" value=""></el-option> -->
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到访日">
          <el-date-picker
            v-model="visitor.begain_time"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="到访日"
            width="200"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离开日">
          <el-date-picker
            v-model="visitor.end_time"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="离开日"
            width="200"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="handleAdd"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="queryCondition"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-delete"
            @click="handleBatchDel"
          ></el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主列表 -->
    <el-table
      :data="pageBean.beanList"
      style="width: 95%; margin: auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="姓名" prop="vname"></el-table-column>
      <el-table-column label="性别" prop="sex">
        <template slot-scope="scope">
          <el-tag type="success" effect="dark" v-if="scope.row.sex == 0"
            >女</el-tag
          >
          <el-tag type="primary" effect="dark" v-if="scope.row.sex == 1"
            >男</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="联系方式" prop="tel"> </el-table-column>
      <el-table-column label="到访时间" prop="begain_time"> </el-table-column>
      <el-table-column label="离开时间" prop="end_time"> </el-table-column>
      <el-table-column label="到访小区" prop="cell.cname"> </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <!--scope.$index→拿到每一行的index，scope.$row→拿到每一行的数据-->
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column
                    align="right">
                <template slot-scope="scope">
                    <el-button size="big" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
                </template>
            </el-table-column> -->
    </el-table>

    <!-- 分页插件 -->
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageBean.totalRecord"
        >
        </el-pagination>
      </div>
    </template>

    <!-- 拟态框 -->
    <el-dialog
      :title="formTitle"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeDialog"
    >
      <el-form :model="visitorForm">
        <el-form-item label="名字">
          <el-input v-model="visitorForm.vname"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="visitorForm.sex" filterable clearable>
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="visitorForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="到访日">
          <el-date-picker
            v-model="visitorForm.begain_time"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="到访日"
            width="200"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离开日">
          <el-date-picker
            v-model="visitorForm.end_time"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="离开日"
            width="200"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="出租状态">
          <el-select v-model="carForm.isrenting" placeholder="---请选择---">
            <el-option label="未出租" value="0"></el-option>
            <el-option label="已出租" value="1"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="绑定车位" prop="stall.parkingnum">
          <el-select
            v-model="carForm.stall.parkingnum"
            placeholder="--请选择--"
            width="200px"
            clearable
          >
            <el-option
              v-for="item in departments"
              :key="item.did"
              :label="item.dname"
              :value="item.did"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="小区">
        <el-select v-model="visitorForm.cell.cid" placeholder="请选择小区" filterable clearable>
          <el-option v-for="item in cellList" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
        </el-select>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleModify">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageBean: {},
      visitor: {},
      visitorForm: {cell:{cid:null}},
      cellList: [],
      pageIndex: 1,
      pageSize: 5,
      formTitle: "",
      Enable: false,
      dialogVisible: false,
      multipleSelection: [],
    };
  },
  methods: {
    closeDialog() {
      this.visitorForm={cell: {cid:null}};
    },
    close() {
      this.visitorForm={cell: {cid:null}};
      this.dialogVisible = false;
    },
    //多选按钮事件改变时调用
    handleSelectionChange(row) {
      this.multipleSelection = row;
    },
    handleSizeChange(size) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = size;
      this.queryCondition();
    },
    handleCurrentChange(page) {
      //console.log(`当前页: ${page}`);
      this.pageIndex = page;
      this.queryCondition();
    },
    //点击新增车辆
    handleAdd() {
      this.visitorForm = {cell:{cid:null}};
      this.formTitle = "新增访客信息";
      this.dialogVisible = true;
      this.Enable = false;
    },

    //车辆编辑
    handleEdit(index, row) {
      this.formTitle = "修改访客信息";
      this.visitorForm = {...row};
      // console.log(this.visitorForm);
      this.dialogVisible = true;
      //this.Enable = true;
    },
    //提前展示车位信息
    queryCells() {
      this.$axios.get("/cell/getAll").then((res) => {
        this.cellList = res.data.data;
      });
    },
    queryCondition() {
      this.$axios
        .post(
          "/visitor/getAll/" + this.pageIndex + "/" + this.pageSize,this.visitor)
        .then((res) => {
          if (res.data.code == 200) {
            console.log(this.visitor);
            this.pageBean = res.data.data;
            //this.queryCondition();
          }
        });
    },
    handleDelete(index, row) {
      console.log(row.vid);
      this.$confirm("此操作将此操作将失去维护的车辆数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/visitor/remove/" + row.vid).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "删除成功！",
                type: "success",
              });
              this.queryCondition();
            }
            if (res.data.code == 500) {
              this.$message.error(res.data.msg + "删除失败！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleBatchDel() {
      if (this.multipleSelection.length > 0) {
        this.$confirm("此操作将永久删除所选车辆数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let vids = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
              vids.push(this.multipleSelection[i].vid);
            }
            console.log(vids);
            this.$axios.post("/car/batchedDel", { vids: vids }).then((res) => {
              this.$message({
                type: "success",
                message: "删除成功",
              });
            });
            this.queryCondition();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message("请选择要删除的数据！");
      }
    },

    //对话框按钮
    handleModify() {
      if (this.formTitle == "修改访客信息") {
        this.$axios
          .post("/visitor/modify", this.visitorForm) //{ params: this.visitorForm }
          .then((res) => {
            if (res.data.code == 200) {
              //清空表单
              this.visitorForm = res.data.data;
              console.log(this.visitorForm);
              //隐藏对话框
              this.dialogVisible = false;
              this.$message({
                message: "修改成功!",
                type: "success",
              });
              //清空表单
              this.visitorForm={cell:{cid:null}}
              console.log(this.visitorForm);
              this.queryCondition();
            }
          });
      } else {
        console.log("employeeAdd:" + JSON.stringify(this.visitorForm));
        alert('sss')
        this.$axios.post("/visitor/add", this.visitorForm).then((res) => {
          if (res.data.code == 200) {
            //清空表单
            //this.visitorForm = {};
            //隐藏对话框
            this.dialogVisible = false;
            this.$message({
              message: "添加成功!",
              type: "success",
            });
            // 刷新当前页面
            this.queryCondition();
          }
        });
      }
    },
  },
  mounted() {
    this.queryCondition();
    this.queryCells();
  },
};
</script>

<style>
</style>